<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="./widget/base"></div>
</head>
<body>
<div id="userToolbar">
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_ADD_DIALOG">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-plus" onclick="userAddDialog();">新增</a>
    </nimrod:security>
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_EDIT_DIALOG">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="userEditDialog();">编辑</a>
    </nimrod:security>
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_FAKE_DELETE_ALL">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-close"
           onclick="userFakeDeleteAll();">删除</a>
    </nimrod:security>
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_REVOKE_FAKE_DELETE_ALL">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-undo"
           onclick="userRevokeFakeDeleteAll();">撤销删除</a>
    </nimrod:security>
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_DELETE_ALL">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-close"
           onclick="userDeleteAll();">永久删除</a>
    </nimrod:security>
    <nimrod:security authority="/COMPONENT/USER/PAGE_ALL/USER_ROLE_DIALOG">
        <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit"
           onclick="userRoleDialog();">角色管理</a>
    </nimrod:security>
</div>
<table id="user"></table>

<script type="text/javascript">
    $(function () {
        var IS_OR_NOT = [];
        var columns = [
            {field: 'checkbox', checkbox: true},
            {field: 'id', title: 'ID'},
            {
                field: 'avatar', title: '头像', formatter: function (value, row, index) {
                    if (value) {
                        value = '<img style="width:40px;height:40px;margin: 4px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;" src="' + Url.System.Api.FILE + '/download/' + value + '"/>';
                    } else {
                        value = '<img style="width:40px;height:40px;margin: 4px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;" src="' + _defaultAvatar + '"/>';
                    }
                    return value;
                }
            },
            {field: 'username', title: '用户名'},
            {field: 'email', title: '电子邮箱'},
            {
                field: 'emailIsVerified', title: '电子邮箱是否验证', formatter: function (value, row, index) {
                    return expressui.grid.formatter(value, IS_OR_NOT);
                }
            },
            {
                field: 'departmentId', title: '所在部门', formatter: function (value, row, index) {
                    var departmentName = [];
                    util.ajax({
                        url: Url.User.Api.DEPARTMENT + '/list_all_by_department_id/' + value,
                        async: false,
                        success: function (data) {
                            for (var i = 0; i < data.length; i++) {
                                departmentName.push(data[i].name);
                            }
                        }
                    });
                    return departmentName.join('\\')
                }
            },
            {
                field: 'enabled', title: '是否启用', formatter: function (value, row, index) {
                    return expressui.grid.formatter(value, IS_OR_NOT);
                }
            },
            {field: 'remark', title: '备注'},
            {field: 'gmtDeleted', title: '删除时间'},
            {field: 'gmtModified', title: '更新时间'},
            {field: 'gmtCreated', title: '创建时间'}
        ];
        $('#user').datagrid(expressui.grid.create, {
            title: '用户管理',
            columns: [columns],
            url: Url.User.Api.USER + '/page_all',
            onBeforeLoad: function (param) {
                util.ajax({
                    url: Url.System.Api.DICTIONARY + '/list_all_by_key/IS_OR_NOT',
                    success: function (data) {
                        if (data) {
                            IS_OR_NOT = data;
                        }
                    }
                });
                IS_OR_NOT.push({value: 'default', valueName: 0});
            }
        });
    });

    function userAddDialog() {
        $('#userAddDialog').dialog(expressui.dialog.create, {
            title: '新增用户',
            width: 500,
            grid: {type: 'datagrid', selector: '#user'},
            href: Url.User.Page.USER + '/add_dialog',
            save: {
                url: Url.User.Api.USER + '/add_one',
                method: 'post'
            },
            buttons: [{
                text: '保存',
                iconCls: 'iconfont icon-save',
                handler: expressui.dialog.add,
                reload: [{type: 'datagrid', selector: '#user'}],
                success: '新增成功'
            }, {
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

    function userEditDialog() {
        var one = $('#user').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (!one) {
            return;
        }
        $('#userEditDialog').dialog(expressui.dialog.create, {
            title: '编辑用户',
            width: 500,
            grid: {type: 'datagrid', selector: '#user'},
            href: Url.User.Page.USER + '/edit_dialog',
            get: {url: Url.User.Api.USER + '/one/{id}', method: 'get'},
            save: {url: Url.User.Api.USER + '/save_one', method: 'post'},
            buttons: [{
                text: '保存',
                iconCls: 'iconfont icon-save',
                handler: expressui.dialog.save,
                reload: [{type: 'datagrid', selector: '#user'}],
                success: '保存成功'
            }, {
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

    function userFakeDeleteAll() {
        var checked = $('#user').datagrid(expressui.grid.getCheckedLessOneOrShowAlert);
        if (!checked) {
            return;
        }
        var id = [];
        for (var i = 0; i < checked.length; i++) {
            id.push(checked[i].id);
        }
        $('#user').datagrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.USER + '/fake_delete_all',
            data: {id: id},
            method: 'post',
            success: '删除成功',
            reload: {type: 'datagrid', selector: '#user'}
        });
    }

    function userRevokeFakeDeleteAll() {
        var checked = $('#user').datagrid(expressui.grid.getCheckedLessOneOrShowAlert);
        if (!checked) {
            return;
        }
        var id = [];
        for (var i = 0; i < checked.length; i++) {
            id.push(checked[i].id);
        }
        $('#user').datagrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.USER + '/revoke_fake_delete_all',
            data: {id: id},
            method: 'post',
            confirmMessage: '确定要撤销删除勾选项吗',
            success: '撤销删除成功',
            reload: {type: 'datagrid', selector: '#user'}
        });
    }

    function userDeleteAll() {
        var checked = $('#user').datagrid(expressui.grid.getCheckedLessOneOrShowAlert);
        if (!checked) {
            return;
        }
        var id = [];
        for (var i = 0; i < checked.length; i++) {
            id.push(checked[i].id);
        }
        $('#user').datagrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.USER + '/delete_all',
            data: {id: id},
            method: 'post',
            success: '删除成功',
            reload: {type: 'datagrid', selector: '#user'}
        });
    }

    function userRoleDialog() {
        var checked = $('#user').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (!checked) {
            return;
        }
        $('#userRoleDialog').dialog(expressui.dialog.create, {
            title: '角色管理',
            grid: {type: 'datagrid', selector: '#user'},
            href: Url.User.Page.USER_ROLE + '/list',
            width: 850,
            height: 450,
            buttons: [{
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }
</script>
</body>
</html>